<template>
  <div class="index-container">
    <div class="header_active">
      <img src="@/assets/images/orderheader.png" alt="" class='headerimage'>
      <div class="header_title f_16">查看详情</div>
    </div>
    <div class="list_center flexrowbetween">
      <div class="flexcolumn h_items">
        <div class="h_item_tex f_16">{{countdata.all_num}}单</div>
        <div class="h_item_content f_14">全部订单</div>
      </div>
      <div class="line"></div>
      <div class="flexcolumn h_items">
        <div class="h_item_tex f_16">{{countdata.successful_num}}单</div>
        <div class="h_item_content f_14">完成单量</div>
      </div>
      <div class="line"></div>
      <div class="flexcolumn h_items">
        <div class="h_item_tex f_16">{{countdata.coin}}</div>
        <div class="h_item_content f_14">可提现金额</div>
      </div>
    </div>
    <div class="flexcenter tabheader">
      <div class="tab_item flexcenter" :class="active==1?'active':''" @click="onchange(1)">活动审核进度</div>
      <div class="tab_item flexcenter" :class="active==2?'active':''" @click="onchange(2)">提现进度</div>
    </div>
    <div class="tabbody">
      <activety-list v-if="active==1"/>
      <tx-list v-if="active==2" />
    </div>
  </div>
</template>

<script>
import { getUserData } from '@/api/home';
import { getCitys, getRegions} from '@/api/comm';
import { areaList } from '@vant/area-data';
import { levelList,levelName } from '@/api/datalist';
import { subTask } from '@/api/task';
import ActivetyList from './activetyList.vue';
import TxList from './txlist.vue';
export default {
  data() {
    return {
      loading:false,
      active:1,
      countdata:{}
    }
  },

  created(){
    // 获取城市
    // this.getProvince(1);
    this.getDicts('/task/index/active_class').then(res=>{
      this.classList = res.data.map(item=>({...item,value:item.name}));
    });
    this.getData();
  },

  components:{
    ActivetyList,
    TxList
  },

  methods: {

    getData(){
      getUserData().then(res=>{
        if(res.code == 1){
          this.countdata = res.data;
          this.countdata.coin = Number(res.data.coin).toFixed(2)
        }
      })
    },

    onchange(type){
      this.active = type
    },
    
    goPage(page){
      this.$router.push({name:page})
    },

    addSponsor(){
      this.form.co_sponsor.push({value:''})
    },

    delSponsor(index,item){
      this.form.co_sponsor.splice(index,1)
    },

    addContact(){
      this.form.contacts.push({username:'',phone:''})
    },

    delcontact(index,item){
      this.form.contacts.splice(index,1)
    },

    onConfirm(type,val){
      console.log('type:',type,val);
      if(type == 1){
        this.value = val[0].name+'-'+val[1].name+'-'+val[2].name;
        this.form.province = val[0].name;
        this.form.city = val[1].name;
        this.form.area = val[2].name;
        this.showArea = false;
      }
      if(type == 2){
        this.form.active_level=val.value;
        this.showPicker=false;
      }
      if(type == 3){
        this.form.active_class=val.value;
        this.showClass=false;
      }
      
    },

    // 日期
    onConfirmCalendar(date){
      const [start, end] = date;
      this.showCalendar = false;
      console.log('start, end:',this.parseTime(start,'{y}-{m}-{d}'), end);
      this.date = this.parseTime(start,'{y}-{m}-{d}')+'/'+this.parseTime(end,'{y}-{m}-{d}');
      this.form.startime = this.parseTime(start,'{y}-{m}-{d}');
      this.form.endtime = this.parseTime(end,'{y}-{m}-{d}');
    },

    className(val){
      this.classList.forEach(item=>{
        if(val == item.name){
          return item.id
        }else{
          return ''
        }
      })
    },

    onSubmit(){
        // console.log('123123：,',this.form);
        let params = {
          province:this.form.province,
          city:this.form.city,
          area:this.form.area,
          contacts:this.form.contacts,
          sponsor:this.form.sponsor,
          startime:this.form.startime,
          endtime:this.form.endtime,
          title:this.form.title,
          url:this.form.url,
          num:this.form.num,
        };
        params.co_sponsor = this.form.co_sponsor.map(item=>item.value);
        params.active_class = this.className(this.form.active_class);
        params.active_level = levelName(this.form.active_level)
        this.loading = true;
        subTask(params).then(res=>{
          if(res.code == 1){
            this.$toast('添加成功');
            this.resetFrom();
          }
          this.loading = false;
        })
    //     this.$store.dispatch('user/login',this.form).then(res=>{
    //         this.$router.push({ path: "/" });
    //         // }else{
    //         //     console.log('失败',res.msg);
    //         //     this.$toast(res.msg);
    //         // }
    //         this.loading = false;
    //     }).catch(e=>{
    //         this.loading = false;
    //     })
    },

    cancle(){
      this.$router.back();
    },

    resetFrom(){
      this.form.active_level='';
      this.form.active_class='';
      this.form.province='';
      this.form.city='';
      this.form.area='';
      this.form.contacts=[{username:'',phone:''}];
      this.form.co_sponsor=[{value:''}];
      this.form.startime='';
      this.form.endtime='';
      this.form.sponsor='';
      this.form.url='';
      this.form.title='';
      this.form.num='';
      this.date='';
      this.value=''
    }

  }
}
</script>

<style lang="scss" scoped>
.index-container {
  width: 100%;
  min-height: 100vh;
  // background:url("~@/assets/images/activebg.png") center no-repeat;
  // background-size: cover;
  // position: relative;
}
.header_active{
  height: 208px;
  width: 100%;
  background: #EC865C;
}
.activebody{
  width: 100%;
  padding: 30px;
  padding-bottom: 0;
  min-height: calc(100vh - 360px);
}
.headerimage{
  width: 100%;
  height: 100%;
}
.header_title{
  width: 100%;
  position: absolute;
  top: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 700;
}
.list_center{
  width: 90%;
  height: 160px;
  background: linear-gradient(45deg, #FDAF8D 0%, #FC5F68 100%);;
  margin: 0 auto;
  margin-top: -80px;
  border: 1px solid #4e4e4e;
  // z-index: 22;
  position: relative;
  border-radius: 10px;
}
.h_items{
  width: 33%;
  align-items: center;
  .h_item_tex{
    font-weight: 700;
    margin-bottom: 14px;
  }
}
.line{
    height: 80px;
    width: 1px;
    background-color: #000;
  }
.tabheader{
  width: 90%;
  margin:0 auto;
  height: 76px;
  margin-top: 40px;
  .tab_item{
    height: 100%;
    width: 50%;
    font-size: 28px;
    text-align: center;
    background-color: #EDEEF0;
    color: #8E8E8E;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    &.active{
      border: 1px solid #4e4e4e;
      color: #000000;
      background-color: #fff;
    }
  }
}
.tabbody{
  width: 90%;
  margin: 0 auto;
  height: 300px;
  background: #fff;
}
</style>